<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box1{
	             /*设置背景的范围:
				  * background-clip
				     *可选值：
				     *  border-box 默认值，背景会出现在边框的下边
				     *  padding-box 背景不会出现在边框，只出现在内容区和内边距
				     *  content-box 背景只会出现在内容区
				     *
				     *background-origin：背景图片的偏移量计算的原点
				     *    padding-box 默认值，background-position从内边距处开始计算
				     * 	  content-box 背景图片的偏移量从内容区处开始计算
				     *    border-box 背景图片的变量从边框处开始计算
				     * 
				     */
				    width: 500px;
				    height: 500px;
				    overflow: auto;/*加上之后出现滚动条*/
				    background-color: #bfa;
				    background-image: url("img/2.jpeg");
				    background-repeat:no-repeat;
				    background-position: 0 0;
				    /*padding: 10px;*/
				    
				    /*border: 10px #000 double;*/
				    /*background-clip:content-box;
				    background-origin:padding-box;*/
				    
				    /*
				     * 背景图片的尺寸
				     * background-size设置背景图片的大小
				     *    第一个值表示宽度
				     *    第二个值表示高度
				     * -如果只写第一个，则第二个值默认就auto
				     * 
				     * cover图片的比例不变，将元素铺满
				     * contain 图片的比例不变，将图片在元素中完整显示
				     * 
				     * */
				    background-size:contain;
			}
			.box2{
				width: 300px;
				height: 1000px;
				background-image: url("img/1.png");
				background-repeat: no-repeat;
				background-position: 100px 100px;
				/*
				 background-attachment
				    -背景图片是否跟随元素移动
				    -可选值：
				        scoll 默认值 背景图片会跟随元素移动
				        fixed 背景会固定在页面中，不会随元素移动
				*/
			    background-attachment:scoll;
				/*background-color: red;*/
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
		</div>
	</body>
</html>
